<template>
  <div>
    <el-row style="margin: 10px 0 10px 10px" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-avatar :src="fromUser.imgUrl" :size="45"></el-avatar>
      </el-col>
      <el-col span="auto">
        <el-row>
          <el-tag effect="dark" size="mini" :type="postTypeTag[post.type]" style="margin-right: 10px">{{postType[post.type]}}</el-tag>
          <span style="font-weight: bold">{{fromUser.nickname}}</span>
        </el-row>
        <el-row class="box">
          <span style="margin-right: 5px">{{post.gmtCreate}}</span>
          <i class="el-icon-location-outline"></i>
          <span>{{post.address}}</span>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="margin-left: 10px">{{post.title}}</el-row>
    <el-row class="box" style="margin-left: 10px">
      <el-tag style="margin-right: 5px">{{post.itemTypeName}}</el-tag>
      <el-button type="text" size="mini" @click="forMoreDetail">查看详情</el-button>
    </el-row>
    <el-divider direction="horizontal"></el-divider>
  </div>
</template>

<script>
export default {
  name: "RelatedPost",
  props: {
    post: Object
  },
  data() {
    return {
      fromUser: this.post.fromUser,
      postType: ['寻物', '认领'],
      postTypeTag: ['success', '']
    }
  },
  methods: {
    forMoreDetail() {
      this.$router.push({
        name: 'post',
        query: {
          id: this.post.id,
          from: 'all'
        }
      })
    }
  }
}
</script>

<style scoped>
.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}
</style>
